<template>
    <div class="baidu-map">
        <div id="l-map"></div>
        <div id="r-result">
            <el-input v-model="addressMap" type="text" id="suggestId" style="width:350px;" placeholder="通过地图定位地址" />
        </div>
        <div id="searchResultPanel" style="border:1px solid #409EFF;width:150px;height:30px; display:none;"></div>
    </div>
</template>
<script>
export default {
    name: 'BaiduMap',
    data() {
        return {
            addressMap: ''
        }
    },
    props: {
        shopAddress: {
            type: String,
            required: true
        }
    },
    components: {},
    created() {
    },
    mounted() {
        this.fuc()
        // 百度地图API功能
        function G(id) {
            return document.getElementById(id);
        }
        var map = new BMap.Map('l-map');
        map.centerAndZoom('湖南', 12);// 初始化地图,设置城市和地图级别。
        var ac = new BMap.Autocomplete(// 建立一个自动完成的对象
            {
                input: 'suggestId',
                location: map
            }
        );
        map.enableScrollWheelZoom(true);
        ac.addEventListener('onhighlight', function(e) { // 鼠标放在下拉列表上的事件
        var str = '';
            var _value = e.fromitem.value;
            var value = '';
            if (e.fromitem.index > -1) {
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str = 'FromItem<br />index = ' + e.fromitem.index + '<br />value = ' + value;
            value = '';
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str += '<br />ToItem<br />index = ' + e.toitem.index + '<br />value = ' + value;
            G('searchResultPanel').innerHTML = str;
        });
        var myValue;
        ac.addEventListener('onconfirm', function(e) { // 鼠标点击下拉列表后的事件
        var _value = e.item.value;
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            G('searchResultPanel').innerHTML = 'onconfirm<br />index = ' + e.item.index + '<br />myValue = ' + myValue;
            setPlace();
        });
        function setPlace() {
            map.clearOverlays();// 清除地图上所有覆盖物
            function myFun() {
                var pp = local.getResults().getPoi(0).point;// 获取第一个智能搜索的结果
                map.centerAndZoom(pp, 18);
                map.addOverlay(new BMap.Marker(pp));// 添加标注
            }
            var local = new BMap.LocalSearch(map, { // 智能搜索
            onSearchComplete: myFun
            });
            local.search(myValue);
        }
    },
    computed: {},
    methods: {
        fuc() {
            this.addressMap = this.shopAddress
        }
    }
}
</script>
<style scoped lang="less">
.baidu-map {
    width: 600px;
    height: 300px;
}
#l-map {
    width: 100%;
    height: 300px;
    /deep/.BMap_cpyCtrl {
        display: none;
    }
    /deep/.anchorBL {
        display: none;
    }
}
#r-result {
    margin-top: 15px;
}
</style>